<template>
  <div>
    <t-popover position="left"  trigger="hover">
      <template slot="content">
        <div>popover内容</div>
      </template>
      <t-button>hover me</t-button>
    </t-popover>
    <t-popover position="bottom"  trigger="hover">
      <template slot="content">
        <div>popover内容</div>
      </template>
      <t-button>hover me</t-button>
    </t-popover>
    <t-popover postion="top"  trigger="hover">
      <template slot="content">
        <div>popover内容</div>
      </template>
      <t-button>hover me</t-button>
    </t-popover>
    <t-popover position="right"  trigger="hover">
      <template slot="content">
        <div>popover内容</div>
      </template>
      <t-button>hover me</t-button>
    </t-popover>
  </div>
</template>

<script>
import Popover from "../../../src/components/popover/popover";
import Button from "../../../src/components/button";
export default {
  components: {
    tPopover: Popover,
    tButton: Button
  },
  data() {
    return {
      loading: true
    };
  }
};
</script>

<style lang="scss">
$background: rgb(24, 144, 255);
.popover {
  .t-button {
    background: $background;
    border: none;
    color: white;
  }
}
</style>
